<template>
	<div class="header" id="head">
		<div class="heade_box">
			<div class="head_left" @click="goHome">
				<div class="head_logo">
					<img src="@/assets/image/head/logo.png" alt="">
				</div>
				<div class="head_tit">
					<img src="@/assets/image/head/head_tit.png" alt="">
				</div>
			</div>
			<div class="head_right">
				<div class="head_message">
					<img src="@/assets/image/head/message.png" alt="">
				</div>
				<div class="head_portrait" @click="gome">
					<img src="@/assets/image/head/message.png" alt="">
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		created() {
			this.$emit('changemessage',{flage:true})
		},
		methods:{
			gome(){
				// this.$router.push({'path':'/me'})
				this.$router.push({'name':'meStatistics'})
			},
      // 前往首页
      goHome(){
        if(this.$route.path !== '/home'){
          this.$router.push({path: '/home'})
        }

      }
		}
	}
</script>
<style lang="less" scoped>
	.heade_box {
		height: 0.81rem;
		// height: 7.5vh;
		width: 100vw;
		background: #4B63C8;
		box-sizing: border-box;
		padding: 0 0.34rem;
		display: flex;
		align-items: center;
		justify-content: space-between;

		&>.head_left {
			display: flex;
			align-items: center;
      cursor:pointer;

			.head_logo {
				width: 0.41rem;
				height: 0.4rem;
				margin-right: 0.21rem;
			}

			.head_tit {
				width: 1.02rem;
				height: 0.22rem;
			}

			&>div {
				&>img {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		}

		&>.head_right {
			display: flex;
			align-items: center;

			.head_message {
				width: 0.25rem;
				height: 0.28rem;
			}

			.head_portrait {
				width: 0.44rem;
				height: 0.44rem;
				border-radius: 50%;
				overflow: hidden;
				margin-left: 0.33rem;

			}

			&>div {
				&>img {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
